<template>
  <transition name="sort">
    <div class="wrapper" @click="closeTag">
    	<div class="leftList">
    		<div class="top">
    			<span @click="showAll">全部文章({{source.length}})</span>
    			<span @click.stop="showTag">标签 <i class="iconfont" style="font-weight: bold;"> &#xe662;</i></span>
    			<div class="tag" v-show="isShow" @click.stop>
    				<p v-for='(tag, index) in result_1.label' class="tagItem" @click="getSortDetail_label(index)">{{tag}}</p>
    			</div>
    		</div>
    		<div>
    			<div class="list" v-for="item in result.listContent">
    				<p class="info">{{item.time.split("-")[0]}}年{{addZero(item.time.split("-")[1])}}月 / {{item.list.length}}篇文章</p>
            <transition-group name="list"  tag="ul">
    				    <li class="title" v-for='(unit, index) in item.list' :key="item.list[index].id" @click="enterArticle(item.list[index].id)" >{{getDay(unit.originDate)}} {{unit.title}}</li>
            </transition-group>
    			</div>	
    		</div>
    		
    	</div>
    	<div class="rightList">
    		<div class="sortArea">
    			<span>分类</span>
    			<ul >
    				<li class="sort" v-for="(tag, index) in result_1.classify" @click="getSortDetail(index)">{{tag.key}}<span>( {{tag.num}} )</span></li>	
    				
    			</ul>
    		</div>
    	</div>
    </div>
  </transition>
</template>

<script>
import {sortInfo} from 'api/assist'
export default {
  name: 'sortArticle',
  data() {
  	return {
  		isShow:false,
  		result:{},
  		result_1:{},
  		source:[],
  	}
  },
  methods: {
  	showTag() {
  		this.isShow = (this.isShow) ? false : true;
  	},
  	closeTag() {
  		this.isShow = false;
  	},
  	getSortInfo() {
  		this.$axios.get('/api/getSortInfo').then((res) => {
  			this.source = res.data;
  			this.result = sortInfo(res.data);
  			this.result_1 = sortInfo(res.data);
  			// console.log(res.data)

  		})
  	},
  	getDay(date) {
  		var monthDay = date.split('-');
  		return `${this.addZero(monthDay[1])}-${this.addZero(monthDay[2])}`

  	},
  	addZero(date) {
  		if(parseInt(date) < 10) {
  			return `0${date}`
  		}
  		else {
  			return date
  		}
  	},
  	enterArticle(id) {
  		// console.log(id)
  		this.$store.commit('changeId', id);
        // console.log(this.$store.state.id);
        this.$router.push({
            path:`/article/${id}`
        })
  	},
  	getSortDetail_label(index) {
  		var label = this.result_1.label[index];
  		var filterData = [];
  		this.source.forEach((item) => {
  			if(item.label.split("/").includes(label)) {
  				filterData.push(item)
  			}
  		})
  		this.result = sortInfo(filterData);
  		this.isShow = false;
  	},
  	getSortDetail(index) {
  		var label = this.result_1.classify[index].key;
  		var filterData = [];
  		this.source.forEach((item) => {
  			if(item.classify.split("/").includes(label)) {
  				filterData.push(item)
  			}
  		})
  		this.result = sortInfo(filterData);
  	},
    showAll() {
      this.result = sortInfo(this.source);
    }

  },
  created() {
  	this.getSortInfo()
  }
  
}
</script>

<style scoped lang="less">
	.wrapper {
		width: 99%;
		height: 100%;
		background: #fff;
		margin:2rem auto;
		display: flex;
		padding-bottom:5rem;
		.leftList {
			width: 70%;
			box-sizing: border-box;
			.top {
				border-bottom: 1px solid #bbb;
				width: 95%;
				height: 100px;
				line-height: 100px;
				position: relative;
				span {
					padding: 1.5rem;
					color: #666;
					cursor: pointer;
					i {
						font-size: 1rem;
					}

				}
				.tag {
					width: 450px;
					height: 230px;
					line-height: 1rem;
					border: 1px solid #bbb;
					position: absolute;
					top: 80px;
					left: 2rem;
					background:#fff;
					z-index: 100;

					.tagItem {
						background: #666;
						color: #fff;
						display: inline-block;
						/*border: 1px solid #ADD8E6;*/
						border-radius: 5px;
						margin: .5rem;
						padding: .5rem;
						cursor: pointer;

					}
				}
			}
			.list {
				padding-right: .5rem;
				.info {
					padding: 1.5rem;
				}
				.title {
					margin: .5rem .5rem 1rem 1.5rem;
					border-bottom: 1px dashed #bbb;
					display: inline-block;
					padding-bottom: .5rem;
					color: #666;
					cursor: pointer;
				}
        .list-enter-active, .list-leave-active {
          transition: all 1s;
        }
        .list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
          opacity: 0;
          transform: translateY(60px);
        }
			}
      
		}
		.rightList {
			width: 30%;
			box-sizing: border-box;
			padding: 2rem;
			margin-top:.5rem;
			span {
				padding-left: 1.2rem;
			}
			.sortArea {
				border-left: 1px solid #bbb;
				padding: 2rem 2rem;
				.sort {
					padding: 1.2rem;
					color: #7594b3;
					position: relative;
					cursor: pointer;
					span {
						position: absolute;
						right: 1.2rem;
						color: #555;

					}
			}

			}
			
		}
	}
  .sort-enter-active, .sort-leave-active {
    transition: all .5s;
  }
  .sort-enter, .sort-leave-to {
    transform: translate3d(-200%,0,0);
  }

</style>
